<template>
  <div id="piesmid-echarts" ref="piesecharts" style="width: 100%;height: 100%">
    <!-- 饼状图 -->
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from '../../mixins/resize'
// 引入提示框和标题组件
// 引入 饼状图
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  components: {},
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.echartsInit()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /**
     * hjkhkjhk
     */
    echartsInit() {
      this.chart = echarts.init(this.$refs.piesecharts)
      var option = {
        'title': {
          'text': '分发总量',
          'top': '85%',
          'left': 'center',
          'textStyle': {
            'fontSize': 14,
            'fontWeight': 'normal',
            'color': '#bcbfff'
          }
        },
        'tooltip': {
          'trigger': 'item',
          'formatter': '{a} : ({d}%)'
        },
        'grid': {
          'height': '90%',
          'width': '90%'
        },
        'series': [{
          'name': '分发总量',
          'center': [
            '50%',
            '50%'
          ],
          'radius': [
            '49%',
            '50%'
          ],
          'clockWise': false,
          'hoverAnimation': false,
          'type': 'pie',
          'data': [{
            'value': 84,
            'name': '',
            'label': {
              'normal': {
                'show': true,
                'formatter': '{d} %',
                'textStyle': {
                  'fontSize': 14,
                  'fontWeight': 'normal'
                },
                'position': 'center'
              }
            },
            'labelLine': {
              'show': false
            },
            'itemStyle': {
              'normal': {
                'color': '#5886f0',
                'borderColor': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#ffc0cb'
                }, {
                  offset: 1,
                  color: '#800080'
                }]),
                'borderWidth': 12
              },
              'emphasis': {
                'color': '#5886f0',
                'borderColor': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#ffc0cb'
                }, {
                  offset: 1,
                  color: '#800080'
                }]),
                'borderWidth': 12
              }
            }
          }, {
            'name': ' ',
            'value': 16,
            'itemStyle': {
              'normal': {
                'label': {
                  'show': false
                },
                'labelLine': {
                  'show': false
                },
                'color': 'rgba(0,0,0,0)',
                'borderColor': 'rgba(0,0,0,0)',
                'borderWidth': 0
              },
              'emphasis': {
                'color': 'rgba(0,0,0,0)',
                'borderColor': 'rgba(0,0,0,0)',
                'borderWidth': 0
              }
            }
          }]
        }, {
          'name': '分发总量',
          'center': [
            '50%',
            '50%'
          ],
          'radius': [
            '59%',
            '60%'
          ],
          'clockWise': false,
          'hoverAnimation': false,
          'type': 'pie',
          'data': [{
            'value': 84,
            'name': '',
            'label': {
              'normal': {
                'show': true,
                'formatter': '{d} %',
                'textStyle': {
                  'fontSize': 14,
                  'fontWeight': 'normal'
                },
                'position': 'center'
              }
            },
            'labelLine': {
              'show': false
            },
            'itemStyle': {
              'normal': {
                'color': '#5886f0',
                'borderColor': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#ffc0cb'
                }, {
                  offset: 1,
                  color: '#800080'
                }]),
                'borderWidth': 1
              },
              'emphasis': {
                'color': '#5886f0',
                'borderColor': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#ffc0cb'
                }, {
                  offset: 1,
                  color: '#800080'
                }]),
                'borderWidth': 1
              }
            }
          }, {
            'name': ' ',
            'value': 16,
            'itemStyle': {
              'normal': {
                'label': {
                  'show': false
                },
                'labelLine': {
                  'show': false
                },
                'color': 'rgba(0,0,0,0)',
                'borderColor': 'rgba(0,0,0,0)',
                'borderWidth': 0
              },
              'emphasis': {
                'color': 'rgba(0,0,0,0)',
                'borderColor': 'rgba(0,0,0,0)',
                'borderWidth': 0
              }
            }
          }]
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
